<template>
	<view class="agent-task-page">
		<!-- 顶部产品广告区域 -->
		<view class="product-ad-section">
			<swiper 
				class="ad-swiper" 
				:indicator-dots="bannerList.length > 1" 
				indicator-color="rgba(255,255,255,0.5)" 
				indicator-active-color="#FFFFFF"
				:autoplay="true" 
				:circular="true" 
				:interval="3000" 
				:duration="500"
				@change="swiperChange">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image class="swiper-image" :src="item.img" mode="aspectFill" @click="previewImage(index)"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 代理任务区域 -->
		<view class="task-section">
			<view class="section-title">代理任务</view>
			<view class="section-subtitle">满足任务条件,即可申请成为代理</view>

			<!-- 任务列表 -->
			<view class="task-list">
				<!-- 任务1: 当前推广人数 -->
				<view class="task-item" v-for="(item,index) in doing" :key="index">
					<view class="task-icon task-icon-green">
						<image class="icon-image" :src="item.icon" mode="aspectFit"></image>
					</view>
					<view class="task-content">
						<view class="task-title">{{item.title}} ({{item.value}}/{{item.need_value}}人)</view>
						<view class="progress-bar">
							<view class="progress-fill" :style="{width: formatProgress(item) + '%'}"></view>
						</view>
					</view>
				</view>
			</view>

			<!-- 晋升条件说明 -->
			<view class="promotion-info" v-if="content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import { agentLevelIndex } from '@/api/user.js';
	
	export default {
		data() {
			return {
				bannerList: [],
				currentSwiper: 0,
				doing: [],
				content: ''
			};
		},
		onLoad() {
			this.getAgentLevelData();
		},
		methods: {
			// 获取代理等级数据
			getAgentLevelData() {
				agentLevelIndex().then(res => {
					if (res.status === 200) {
						const data = res.data;
						
						// 处理轮播图数据
						if (data.banner && data.banner.length > 0) {
							this.bannerList = data.banner;
						}
						
						// 处理晋升条件内容
						if (data.agent_level_up_content && data.agent_level_up_content.content) {
							this.content = data.agent_level_up_content.content;
						}
						
						// 处理任务数据
						if (data.doing && data.doing.length > 0) {
							this.doing = data.doing;
						}
					}
				}).catch(err => {
					console.error('获取代理等级数据失败:', err);
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
				});
			},
			formatProgress(item) {
				return Math.min((Number(item.value) / Number(item.need_value) * 100),100)
			},
			
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			
			previewImage(index) {
				const urls = this.bannerList.map(item => item.img || item);
				uni.previewImage({
					current: index,
					urls: urls
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.agent-task-page {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	/* 顶部产品广告区域 */
	.product-ad-section {
		background: linear-gradient(180deg, #1E3A5F 0%, #2A4A6F 100%);
		position: relative;
		overflow: hidden;
	}

	.ad-swiper {
		width: 100%;
		height: 400rpx;
		overflow: hidden;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	/* 代理任务区域 */
	.task-section {
		background-color: #F5F5F5;
		padding: 40rpx 30rpx;
		margin-top: -30rpx;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
		z-index: 1;
	}

	.section-title {
		font-size: 48rpx;
		font-weight: bold;
		color: #282828;
		margin-bottom: 16rpx;
	}

	.section-subtitle {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 40rpx;
	}

	.task-list {
		margin-bottom: 40rpx;
	}

	.task-item {
		display: flex;
		align-items: flex-start;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.task-icon {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.icon-image {
		width: 100%;
		height: 100%;
	}

	.task-content {
		flex: 1;
	}

	.task-title {
		font-size: 30rpx;
		color: #282828;
		margin-bottom: 20rpx;
		font-weight: 500;
	}

	.progress-bar {
		width: 100%;
		height: 12rpx;
		background-color: #EEEEEE;
		border-radius: 6rpx;
		overflow: hidden;
		position: relative;
	}

	.progress-fill {
		height: 100%;
		background-color: #E0E0E0;
		border-radius: 6rpx;
		transition: width 0.3s ease;
		min-width: 2rpx;
	}

	.task-item:first-child .progress-fill {
		background-color: #4CAF50;
	}

	.task-item:last-child .progress-fill {
		background-color: #2196F3;
	}

	/* 晋升条件说明 */
	.promotion-info {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.info-text {
		font-size: 26rpx;
		color: #666666;
		line-height: 1.8;
		margin-bottom: 30rpx;
	}

	.promotion-path {
		margin-bottom: 24rpx;
		padding: 20rpx;
		background-color: #F8F8F8;
		border-radius: 12rpx;
	}

	.promotion-path:last-child {
		margin-bottom: 0;
	}

	.path-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #282828;
		margin-bottom: 12rpx;
	}

	.path-condition {
		font-size: 26rpx;
		color: #666666;
		line-height: 1.6;
	}
</style>
